import React from 'react';
import { View, Text, TouchableOpacity, Image, StyleSheet, StatusBar, Platform } from 'react-native';

interface HeaderProps {
    title: string;
    showBackButton?: boolean;
    showRightButton?: boolean;
    showAddButton?: boolean; // 新增：控制显示加号按钮
    rightButtonIcon?: any;
    onRightPress?: () => void;
    onAddPress?: () => void; // 新增：加号按钮点击事件
    rightButtonText?: string;
    onNavigateToLogin?: () => void;
    onBackPress?: () => void; // 新增返回按钮点击事件
}

const Header: React.FC<HeaderProps> = ({
    title,
    showBackButton = false,
    showRightButton = false,
    showAddButton = false, // 新增
    rightButtonIcon,
    onRightPress,
    onAddPress, // 新增
    rightButtonText,
    onNavigateToLogin,
    onBackPress, // 新增
}) => {
    // 返回按钮点击处理，优先使用onBackPress，如果没有则使用onNavigateToLogin
    const handleBackPress = () => {
        if (onBackPress) {
            onBackPress();
        } else if (onNavigateToLogin) {
            onNavigateToLogin();
        }
    };

    return (
        <View style={styles.headerContainer}>
            <StatusBar
                barStyle="dark-content"
                backgroundColor="#fff"
                translucent={true}
            />
            <View style={styles.header}>
                {showBackButton && (
                    <TouchableOpacity onPress={handleBackPress} style={styles.headerBackBtn}>
                        <Image
                            source={require('../../assets/fanhui.png')}
                            style={{ width: 30, height: 30 }}
                        />
                    </TouchableOpacity>
                )}

                <Text style={styles.title}>{title}</Text>

                {/* {showAddButton && (
                    <TouchableOpacity onPress={onAddPress} style={styles.headerAddBtn}>
                        <Image
                            source={require('../../assets/jiahao.png')}
                            style={{ width: 24, height: 24 }}
                        />
                    </TouchableOpacity>
                )} */}

                {showRightButton && (
                    <TouchableOpacity onPress={onRightPress} style={styles.headerRightBtn}>
                        {rightButtonIcon ? (
                            <Image source={rightButtonIcon} style={{ width: 30, height: 30 }} />
                        ) : rightButtonText ? (
                            <Text style={styles.rightButtonText}>{rightButtonText}</Text>
                        ) : (
                            <Image
                                source={require('../../assets/outlogin.png')}
                                style={{ width: 30, height: 30 }}
                            />
                        )}
                    </TouchableOpacity>
                )}
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    headerContainer: {
        backgroundColor: '#fff',
        paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight || 0 : 0,
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height: 50,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        backgroundColor: '#fff',
        position: 'relative',
        zIndex: 10,
    },
    title: {
        fontSize: 22,
        fontWeight: 'bold',
        color: '#333',
        textAlign: 'center',
    },
    headerBackBtn: {
        position: 'absolute',
        left: 0,
        top: 0,
        bottom: 0,
        justifyContent: 'center',
        padding: 10,
    },
    headerAddBtn: {
        position: 'absolute',
        right: 0,
        top: 0,
        bottom: 0,
        justifyContent: 'center',
        padding: 8,
    },
    headerRightBtn: {
        position: 'absolute',
        right: 0,
        top: 0,
        bottom: 0,
        justifyContent: 'center',
        padding: 8,
    },
    rightButtonText: {
        color: '#007AFF',
        fontSize: 16,
        fontWeight: 'bold',
    },
});

export default Header; 